<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:300px;border:solid 1px black;margin:20px auto;}

        .btns{height:30px;border-bottom:solid 1px black;}
        .btns button.active{background:red;}

        .cont>div{width:400px;height:269px;display:none;}

        .cont .cont1{background:red;display:block;}
        .cont .cont2{background:green}
        .cont .cont3{background:blue}
    </style>
</head>
<body>

    <div class="box">
        <div class="btns">
            <button class="active">选项1</button>
            <button>选项2</button>
            <button>选项3</button>
        </div>
        <div class="cont">
            <div class="cont1">
                选项1对应的内容选项1对应的内容选项1对应的内容选项1对应的内容
            </div>
            <div class="cont2">
                选项2对应的内容
            </div>
            <div class="cont3">
                选项3对应的对应的对应的对应的对应的
            </div>
        </div>
    </div>
</body>

<script>

    // 分析：选项卡，点击按钮切换对应内容
    // 1. 获取元素
    // 2. 绑定事件      2.绑定索引
        // 3. 获取索引
        // 3. 取消其他（全部）
        // 4. 根据获取到的索引，显示对应的内容
    
    // 设计：高内聚，低耦合
    // 高内聚：所有的功能或属性都属于一个对象（类，构造函数）
    // 低耦合：每个功能，尽量可以独立运行
    // function TabChange(){
    //     // 1. 获取元素，保存到属性
    //     // this.xxx = xxx
    //     // 2. 绑定事件
    //     this.addEvent();
    //     // 2. 绑定索引
    //     this.addIndex();
    // }
    // TabChange.prototype.addIndex = function(){
    //     console.log("将要绑定索引")
    // }
    // TabChange.prototype.addEvent = function(){
    //     console.log("将要绑定事件")
    //     // 触发事件
    //         // 3. 取消其他（全部）
    //         this.cancelOther();
    //         // 3. 获取索引
    //         // ...
    //         // 4. 根据获取到的索引，显示对应的内容
    //         this.showNow(当前索引)
    // }
    // TabChange.prototype.cancelOther = function(){
    //     console.log("取消其他内容显示")
    // }
    // TabChange.prototype.showNow = function(now){
    //     console.log("准备显示索引对应的内容")
    // }
    // new TabChange();


    // 编程
    function TabChange(){
        // 1. 获取元素，保存到属性
        this.btns = document.querySelectorAll(".btns button");
        this.items = document.querySelectorAll(".cont>div");
        // 2. 绑定事件
        this.addEvent();
        // 2. 绑定索引
        this.addIndex();
    }
    TabChange.prototype.addIndex = function(){
        // console.log("将要绑定索引");
        for(let i=0;i<this.btns.length;i++){
            this.btns[i].index = i;
        }
    }
    TabChange.prototype.addEvent = function(){
        const that = this;
        // console.log("将要绑定事件")
        for(let i=0;i<this.btns.length;i++){
            // 触发事件
            this.btns[i].onclick = function(){
                // 3. 取消其他（全部）
                that.cancelOther();
                // 3. 获取索引
                // console.log(this.index)
                // 4. 根据获取到的索引，显示对应的内容
                that.showNow(this.index);
            }
        }
    }
    TabChange.prototype.cancelOther = function(){
        // console.log("取消其他内容显示")
        for(let i=0;i<this.btns.length;i++){
            this.btns[i].className = "";
            this.items[i].style.display = "none";
        }
    }
    TabChange.prototype.showNow = function(now){
        // console.log("准备显示索引对应的内容")
        this.btns[now].className = "active";
        this.items[now].style.display = "block";
    }
    new TabChange();






</script>

</html>